import React, { useState, useEffect } from 'react';
import { Table, Button, Tag, Popconfirm, message } from 'antd';
import { getApplyApi, updateApplyApi } from '../../../apis/gen/genAPI';
import Search from '../../../components/apply/Search';

export default function ShopApply() {
  const [data, setData] = useState([]);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  useEffect(() => {
    getApply();
  }, []);
  const getApply = async (data) => {
    const res = await getApplyApi(data);
    setData(res.data.rows);
    console.log(res.data.rows);
  };
  const columns = [
    {
      title: 'id',
      key: 'id',
      dataIndex: 'id',
    },
    {
      title: '商铺名称',
      key: 'shopName',
      dataIndex: 'shopName',
    },
    {
      title: '手机号码',
      key: 'tel',
      dataIndex: 'tel',
    },
    {
      title: '地址',
      key: 'address',
      dataIndex: 'address',
    },
    {
      title: '申请人姓名',
      key: 'managerName',
      dataIndex: 'managerName',
    },
    {
      title: '身份证号',
      key: 'idCard',
      dataIndex: 'idCard',
    },
    {
      title: '审核状态',
      key: 'status',
      dataIndex: 'status',
      filters: [
        {
          text: '同意',
          value: '同意',
        },
        {
          text: '拒绝',
          value: '拒绝',
        },
        {
          text: '审核中',
          value: '审核中',
        },
      ],
      onFilter: (value, record) => record.status == value,
    },
    {
      title: '营业执照编号',
      key: 'licenceNo',
      dataIndex: 'licenceNo',
    },
    {
      title: '营业执照',
      key: 'licenceImg',
      // dataIndex: 'licenceImg',
      render: (tag) => (
        <img
          src={tag.licenceImg}
          style={{ width: '50px', height: '50px' }}
          alt=""
        />
      ),
    },
    {
      title: '操作',
      key: '6',
      fixed: 'right',
      width: 100,
      render: (tag) => (
        <Button
          onClick={() => {
            console.log(tag.licenceImg);
          }}
          type="dashed"
        >
          删除
        </Button>
      ),
    },
  ];
  const onSelectChange = (selectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(selectedRowKeys);
  };
  const onChange = (pagination, filters, sorter, extra) => {
    console.log('params', pagination, filters, sorter, extra);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap' }}>
      <Search getApply={getApply}></Search>
      <Table
        pagination={{
          defaultCurrent: 1,
          defaultPageSize: 5,
          pageSizeOptions: [5, 10],
          showSizeChanger: true,
        }}
        rowSelection={rowSelection}
        columns={columns}
        dataSource={data}
        onChange={onChange}
      />
    </div>
  );
}
